<template>
	<view class="big-Box">
		<view class="left-box">
			<view class="item" :class="[item.id == leftActive?'item-active':'']" v-for="item in leftList" :key="item.id"
				@click="handleLeft(item)">
				<view class="relative">
					{{`${item.label}`}}
					<u-badge absolute :offset="[8,-12]" type="error" max="99" :value="item.num"></u-badge>
				</view>
			</view>
		</view>
		<view class="right-box">
			<view v-if="leftActive == 1">
				<view class="top-tags">展示用户全部待审核随手拍</view>
				<view class="main-box" v-for="item in mineList" :key="item.id"
					@click="handleToCheck(item,'smallTakeNum')">
					<view class="double-title">
						<view class="title">{{item.dangerSite}}</view>
						<view class="title-right title-dyz-repair">待审核</view>
					</view>
					<view class="double-content">{{item.dangerDesc}}</view>
					<view class="content">
						{{item.createTime.split(' ')[0]}}
					</view>
				</view>
			</view>
			<view v-if="leftActive == 2">
				<view class="top-tags">展示用户全部待复查任务</view>
				<view class="main-box" v-for="item in mineList" :key="item.id" @click="handleToCheck(item,'dangerNum')">
					<view class="double-title">
						<view class="title">{{item.dangerSite}}</view>
						<view class="title-right title-dyz-repair">
							{{'待复查'}}
						</view>
					</view>
					<view class="double-content">{{item.dangerDesc}}</view>
					<view class="bottom-content">
						<view class="tags">{{item.planName}}</view>
						<view v-if="item.overFlag == 1" class="title-error">
							已逾期
						</view>
					</view>
				</view>
			</view>
			<view v-if="leftActive == 3">
				<view class="top-tags">展示用户全部待审核的备件申请</view>
				<view class="main-box" v-for="item in mineList" :key="item.id">
					<view class="title">申请单号{{item.applyNum}}</view>
					<view class="line1" style="margin-top: 26rpx;"></view>
					<view class="content maBot">申请数量：<text class="txt">{{item.applyAmount}}</text>件</view>
					<view class="content maBot">申请时间：<text class="txt">{{item.createTime}}</text></view>
					<view class="bottom-btn">
						<view class="bg-btn2" @click="handleToCheck(item,'partApplyNum')">
							{{'去审核'}}
						</view>
					</view>
				</view>
			</view>
			<view v-if="leftActive == 4">
				<view class="top-tags">展示用户全部待审核的退还申请</view>
				<view class="main-box" v-for="item in mineList" :key="item.id">
					<view class="title">申请单号{{item.applyNum}}</view>
					<view class="line1" style="margin-top: 26rpx;"></view>
					<view class="content maBot">申请数量：<text class="txt">{{item.refundAmount}}</text>件</view>
					<view class="content maBot">申请时间：<text class="txt">{{item.createTime}}</text></view>
					<view class="bottom-btn">
						<view class="bg-btn2" @click="handleToCheck(item,'partRefundNum')">
							{{'去审批'}}
						</view>
					</view>
				</view>
			</view>
			<view v-if="leftActive == 5">
				<view class="top-tags">展示用户全部待验证的维修任务</view>
				<view class="main-box" v-for="item in mineList" :key="item.id">
					<view class="double-title">
						<view class="title">{{item.repairOrderNum}}</view>
						<view class="title-right" :class="['title-close-repair']">
							{{'待验证'}}
						</view>
					</view>
					<view class="line1" style="margin-top: 26rpx;"></view>
					<view class="content maBot">设备名：<text class="txt">{{item.deviceName}}</text></view>
					<view class="content maBot">设备编号：<text class="txt">{{item.deviceNum}}</text></view>
					<view class="double-content maBot">
						故障描述：<text class="txt">{{item.description}}</text></view>
					<view class="content maBot">维修人：<text class="txt">{{item.repairUserName}}</text></view>
					<view class="bottom-btn">
						<view class="bg-btn2" @click="handleToCheck(item,'repairNum')">
							{{'去验证'}}
						</view>
					</view>
				</view>
			</view>
			<u-loadmore v-if="total>8" :status="status" :line="true" />
			<view class="empty-data" v-if="mineList.length == 0">
				<u-empty mode="data" :marginTop="50"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				leftActive: 1,
				typeActive: 'smallTakeNum',
				leftList: [{
					id: '1',
					label: '随手拍',
					type: 'smallTakeNum',
					num: 0
				}, {
					id: '2',
					label: '隐患复查',
					type: 'dangerNum',
					num: 0
				}, {
					id: '3',
					label: '备件申请',
					type: 'partApplyNum',
					num: 0
				}, {
					id: '4',
					label: '备件退还',
					type: 'partRefundNum',
					num: 0
				}, {
					id: '5',
					label: '维修验证',
					type: 'repairNum',
					num: 0
				}],
				mineList: [],
				params: {
					pn: 1,
					ps: 8,
				},
				pages: 1,
				total: 0,
			}
		},
		onShow() {
			this.mineList = []
			this.params.pn = 1
			this.getNum()
			this.getList()
		},
		methods: {
			getNum() {
				uni.$u.http.get(`/device/mobile/deviceRepair/getNotApproveNum`).then(res => {
					if (res.code == 0) {
						this.leftList.map(item => {
							item.num = res.data[item.type]
						})
					}
				}).catch(err => {})
			},
			getList() {
				let url = ''
				let params = JSON.parse(JSON.stringify(this.params))
				switch (this.typeActive) {
					case 'smallTakeNum':
						url = '/check/mobile/appSmallTake/getNotDealSmallTakeList'
						params.type = 2
						break;
					case 'dangerNum':
						url = '/check/mobile/appDangerInfo/getNotDealDangerList'
						params.type = 2
						break;
					case 'partApplyNum':
						url = '/device/mobile/devicePartApply/getNotDealPartApplyList'
						params.type = 2
						break;
					case 'partRefundNum':
						url = '/device/mobile/devicePartRefund/getNotDealPartRefundList'
						params.type = 2
						break;
					case 'repairNum':
						url = '/device/mobile/deviceRepair/getNotDealRepairList'
						params.type = 3
						break;
				}
				if (!url) return
				
				uni.$u.http.post(url, params).then(res => {
					if (res.code == 0) {
						this.mineList = this.mineList.concat(res.data.records)
						this.pages = res.data.pages;
						this.total = res.data.total;
						uni.stopPullDownRefresh()
					}
				}).catch(err => {})
			},
			handleLeft(item) {
				if (item.type === this.typeActive) return
				this.leftActive = item.id
				this.mineList = []
				this.params.pn = 1
				this.typeActive = item.type
				this.getList()
			},
			handleToCheck(item, type) {
				if (type === 'smallTakeNum') {
					// 随手拍
					uni.navigateTo({
						url: `/pages/subPackagesA/randomClap/waitRandom?randomId=${item.id}&type=${2}&current=${1}`
					})
				} else if (type === 'dangerNum') {
					// 隐患管理
					uni.navigateTo({
						url: `/pages/subPackagesA/troble/notRectified?dangerStatus=${item.dangerStatus}&id=${item.id}&reviewFlag=1`
					})
				} else if (type === 'partApplyNum') {
					// 备件申请
					uni.navigateTo({
						url: '/pages/subPackagesB/bjverify/approveInfo?id=' + item.id
					})
				} else if (type === 'partRefundNum') {
					// 备件退还
					uni.navigateTo({
						url: '/pages/subPackagesB/bjreturn/returnVerify?id=' + item.id
					})
				} else if (type === 'repairNum') {
					// 维修验证
					uni.navigateTo({
						url: '/pages/subPackagesA/repairverify/verifyDetail?repairOrderNum=' + item
							.repairOrderNum +
							'&repairId=' + item.id + '&verifyStatus=' + item.verifyStatus
					})
				}
			},
			toSelectDetail(item) {
				uni.navigateTo({
					url: `/pages/subPackagesA/repairList/wxDetail?orderNum=${item.repairOrderNum}&repairId=${item.id}`
				})
			},
			gotoOutsourcing(item) {
				uni.navigateTo({
					url: '/pages/subPackagesB/weiwaiRepair/repairlist?deviceId=' + item.deviceId + '&orderNum=' +
						item.repairOrderNum + '&repairId=' + item.id
				})
			},
			togoRepairpage(item, type) {
				// type 2-开始维修 1-继续维修
				if (type == 2) {
					uni.$u.http.post(`/device/mobile/deviceRepair/beginRepair/${item.id}`).then(res => {
						if (res.code == 0) {}
					}).catch(err => {})
				}
				uni.navigateTo({
					url: '/pages/subPackagesA/repairList/repairinfo?deviceId=' + item.deviceId + '&orderNum=' +
						item.repairOrderNum + '&repairId=' + item.id + '&deviceType=' + item.deviceType
				})
			},
			closeRepair(item) {
				uni.navigateTo({
					url: '/pages/subPackagesA/repairList/closerepair?repairId=' + item.id
				})
			},
			renderWay(data) {
				const typeForm = [{
					value: 1,
					label: '笔试'
				}, {
					value: 2,
					label: '实操'
				}]
				const newArr = []
				data.split(',').map(item => {

					if (typeForm.filter(it => it.value == item).length) {
						newArr.push(typeForm.filter(it => it.value == item)[0].label)
					}
				})
				return newArr.join(',')
			}
		},
		onReachBottom() {
			if (this.params.pn >= this.pages) return;
			this.status = 'loading';
			this.params.pn = ++this.params.pn;
			setTimeout(() => {
				this.getList()
				if (this.params.pn >= this.pages) this.status = 'nomore';
				else this.status = 'loading';
			}, 1000)
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}

	.big-Box {
		height: 100%;
		display: flex;

		.left-box {
			position: fixed;
			left: 0;
			height: 100vh;
			min-width: 108px;
			background: #F5F5F5;

			.item {
				position: relative;
				height: 100rpx;
				line-height: 100rpx;
				border-left: 8rpx solid #fff;
				color: #666666;
				.relative {
					padding-left: 24rpx;
					position: relative;
					display: inline-block;
				}
			}

			.item-active {
				border-left: 8rpx solid #0F53AC;
				color: #2B2B2B;
				background: #ffffff;
			}
		}

		.right-box {
			flex: 1;
			width: calc(100% - 108px);
			margin-left: 108px;

			.tags {
				padding: 4rpx 24rpx 4rpx 24rpx;
				border-radius: 8rpx;
				border: 1px solid #0F53AC;
				color: #0F53AC;
				font-size: 28rpx;
				max-width: 214rpx;
				box-sizing: border-box;
				text-align: center;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.top-tags {
				font-size: 28rpx;
				font-weight: 400;
				text-align: center;
				padding: 30rpx 0;
				color: #8C8C8C;
				background-color: #ffffff;
			}

			.main-box {
				padding: 32rpx;
				border-bottom: 1px solid #F2F2F2;

				.double-title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					// border-bottom: 2rpx solid #EDEDED;
					// padding-bottom: 14rpx;

					.title {
						color: #2B2B2B;
					}
				}

				.logo {
					border-radius: 4px;
					border: 1px solid rgba(15, 83, 172, 1);
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 2px 5px 2px 5px;
					margin-right: 8rpx;
				}

				.title {
					color: #2B2B2B;
					font-size: 32rpx;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; // 默认不换行；
				}

				.content {
					color: #8C8C8C;
					font-size: 14px;
					margin: 20rpx 0 0 0;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; // 默认不换行；
				}

				.double-content {
					color: #4D4D4D;
					font-size: 14px;
					margin: 20rpx 0;
					overflow: hidden; //超出文本隐藏
					text-overflow: ellipsis; ///超出部分省略号显示
					display: -webkit-box; //弹性盒模型
					-webkit-box-orient: vertical; //上下垂直
					-webkit-line-clamp: 2; //自定义行数
					word-break: break-all;
					word-wrap: break-word;
				}

				.maBot {
					margin-bottom: 0px;
				}

				.bottom-btn {
					display: flex;
					justify-content: space-around;
					align-items: center;
					margin-top: 24rpx;
					padding-top: 24rpx;
					border-top: 1px solid #f2f2f2;

					.bg-btn {
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 17px;
						font-weight: 400;
						line-height: 24.62px;
						color: rgba(102, 102, 102, 1);
					}

					.bg-btn2 {
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 17px;
						font-weight: 400;
						line-height: 24.62px;
						color: #0F53AC;
					}
				}

				.image-box {
					width: 100%;

					.title-image {
						display: block;
						width: 100%;
						height: 200rpx;
						border-radius: 4px;
					}
				}
			}

			.bottom-content {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				color: #666666;
				font-size: 28rpx;

				.right-tags {
					display: flex;
					align-items: center;
				}

				.tags {
					border: 1px solid #0F53AC;
					color: #0F53AC;
					margin-right: 20rpx;
					min-width: 120rpx;
					height: 52rpx;
					padding: 8rpx 24rpx 8rpx 24rpx;
					box-sizing: border-box;
					font-size: 24rpx;
					border-radius: 8rpx;
				}

				.red-tags {
					background-color: rgba(255, 77, 77, 0.2);
					color: #FA4016;
				}

				.orange-tags {
					background-color: rgba(252, 119, 10, 0.2);
					color: #FC770A;
				}
			}

			.title-right {
				min-width: 120rpx;
				height: 48rpx;
				text-align: center;
				border-radius: 8rpx;
				font-size: 24rpx;
				padding: 8rpx 24rpx;
				box-sizing: border-box;
			}

			.title-ongoing {
				color: #858585;
				background-color: #DBDBDB;
			}

			.title-dyz {
				color: #fff;
				background-color: #0070C0;
			}

			.title-yellow {
				color: #5C5C5C;
				background-color: #FFFF00;
			}

			.title-close {
				color: #fff;
				background-color: #E36C09;
			}

			.title-finish {
				color: #FF4D4D;
				border: 1px solid #FF4D4D;
			}

			.title-dyz-repair {
				color: #0F53AC;
				background-color: rgba(15, 83, 172, 0.2);
			}

			.title-close-repair {
				color: #FC770A;
				background-color: rgba(252, 119, 10, 0.2);
			}

			.title-finish-repair {
				color: #02AD82;
				background-color: rgba(2, 173, 130, 0.2);
			}

		}
	}

	.txt {
		color: #4D4D4D;
	}

	.title-error {
		min-width: 120rpx;
		height: 52rpx;
		border: 1px solid #FF4D4D;
		padding: 8rpx 24rpx 8rpx 24rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		color: #FF4D4D;
		border-radius: 8rpx;
	}
</style>